<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <!-- can i figure out strict? -->
<html> 
<head> 
	<title>WebTag</title> 
	 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 

<!--	<link rel="apple-touch-icon-precomposed" href="jqtouch.png" />-->
<!--	<link rel="apple-touch-startup-image" href="jqt_startup.png" />-->
	<meta name="apple-touch-fullscreen" content="yes" />
	<meta name="apple-mobile-web-app-capable" content="yes" />

	<script type="text/javascript" src="jq/trunk_20100330/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jq/trunk_20100330/jqtouch.js"></script>

	<script type="text/javascript" src="UI.js"></script>
	<script type="text/javascript" src="iPhone.js"></script>

	<link rel="stylesheet" type="text/css" href="general.css" />
	<link rel="stylesheet" type="text/css" href="iPhone.css" />

<!--	<meta name="apple-mobile-web-app-capable" content="yes" />-->
<!--	<meta name="apple-mobile-web-app-status-bar-style" content="black" />-->

	<script type="text/javascript">
		$.jQTouch({
			icon: 'jq/jqtouch.png',
			statusBar: 'black-translucent'
		});

		$(document).ready(function() {
			$("#picture").swipe(function(event, info) {
				confirm("pic swipe");
			});
			$("#tags").swipe(function(event, info) {
				confirm("tags swipe");
			});
		});
	</script>

</head>
<body onload="removeAddressBar()" id="jqt"> 

<div id="pictureDiv">
	<img id="picture" class="touch" src="bgtest.png" width="180" height="240" />
</div>

<div id="sidebar">

	<ul id="nav">
		<li>&lt;</li>
		<li>cfg</li>
		<li>&gt;</li> <!-- setting last li as "float:left" causes issues with next line.  how does it work on flickr's page? -->
	</ul>

	<div id="details">
		<h2 id="title" class="ellipsis">text goes here.  where does this text flow?  why or why not?  analyze!</h2>
		<p id="desc" class="ellipsis">description goes here.  how does it flow and what size?</p>
	</div>

	<ul id="tags" class="touch">
		<li>Andy</li>
		<li>Brianne</li>
		<li>cep</li>
		<li>DC</li>
		<li>ehs</li>
		<li>Gina</li>
		<li>Jeremy</li>
		<li>Justin</li>
		<li>Kimberly</li>
		<li>Kyle</li>
		<li>Lauren</li>
		<li>Tyler</li>
	</ul>

</div> <!-- /sidebar -->

<div id="overlay"></div>

<div id="renamePopup" class="popup">
	<p id="renameTitle">Select a pad to rename</p>
	<form name="renameForm" onsubmit="renamePad(); return false;"> <!-- return false doesn't seem to work here -->
		<input type="text" id="renameText" name="tag" size="20" />
		<input type="submit" value="Save" />
		<input type="button" value="Done" onclick="doneRenaming();" />
	</form>
</div>

<div id="pads">
	<ul>
		<!-- there is some way to determine which element was clicked in the handler, so fix passing of ints here -->
		<li onclick="padClicked(this)"></li>
		<li onclick="padClicked(this)"></li>
		<li onclick="padClicked(this)"></li>
		<li onclick="padClicked(this)"></li>
		<li onclick="padClicked(this)"></li>
		<li onclick="padClicked(this)"></li>
		<li onclick="padClicked(this)"></li>
		<li onclick="padClicked(this)"></li>
		<li onclick="padClicked(this)"></li>
	</ul>
</div>

	</body> 
</html> 
	
